<template>
  <QmsForm :colSpan="4" :formState="formState" :formItems="formItems" :formRules="formRules" @submit="searchData">
    <template #fieldM>
      <el-radio-group v-model:value="formState.fieldM">
        <el-radio-button value="a">Hangzhou</el-radio-button>
        <el-radio-button value="b">Shanghai</el-radio-button>
      </el-radio-group>
    </template>
    <template #addOperation>
      <el-button @click="searchData">{{t('exprot')}}</el-button>
    </template>
  </QmsForm>
  <el-tabs
    tab-position="top"
    v-model:activeKey="activeKey"
  >
    <el-tab-pane v-for="i in 5" :key="i" :tab="`Tab-${i}`">
      <el-table
        :dataSource="dataSource"
        :columns="columns"
        :pagination="{ pageSize: 50 }"
        :scroll="{ y: 400 }"
      >
        <template #nameTitle>{{t('name')}}</template>
        <template #ageTitle>{{t('age')}}</template>
        <template #tagsTitle>{{t('tags')}}</template>
        <template #addressTitle>{{t('address')}}</template>
        <template #actionTitle>{{t('action')}}</template>
        <template #tags="{ text: tags}">
          <span>
            <el-tag
              v-for="tag in tags"
              :key="tag"
              :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
            >
              {{ tag.toUpperCase() }}
            </el-tag>
          </span>
        </template>
        <template #address="{ record }">
          <QmsTableEdit :record="record" col="address" @submit="editAddress" component="Input" :parameter="{placeholder:record.address}"/>
        </template>
        <template #name="{ record }">
          <div v-if="!record.isEdit">
            {{record.name}}
          </div>
          <div v-else>
            <el-input :placeholder="record.name" v-model:value="record.name"></el-input>
          </div>
        </template>
        <template #action="{ record }">
          <span>
            <el-button type="link" v-if="!record.isEdit" @click="changeEditStatus(record)">Edit</el-button>
            <template v-else>
              <el-button  type="link" @click="confirmEdit(record)" size="small">Yes</el-button>
              <el-button  type="link" @click="cancelEdit(record)" size="small">No</el-button>
            </template>
            <el-button type="link">Delete</el-button>
          </span>
        </template>
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup lang="ts">
import { ref, UnwrapRef, reactive } from "vue"
import QmsForm from "@/components/Base/Form/index.vue"
import QmsTableEdit from "@/components/Base/Table/edit.vue"
import { useI18n } from 'vue-i18n'
const { t } = useI18n({})
import store from '@/store'
const pageLoading = ref(store.getters['test/getPageLoading'])
interface FormState {
  fieldA: string
  fieldB: string
  fieldC: boolean
  fieldD: number
  fieldE: number
  fieldL: number
  fieldM: string
}
const formState: UnwrapRef<FormState> = reactive({
  fieldA: "",
  fieldB: "JOe",
  fieldC: true,
  fieldD: 2,
  fieldE: 2,
  fieldL: 23,
  fieldM: "a",
})
const formItems = ref([
  {
    label: {
      zhCN:"参数一",
      enUS:"Field A",
    },
    value: "fieldA",
    component: "Input",
    parameter: {},
  },
  {
    label: {
      zhCN:"参数二",
      enUS:"Field B",
    },
    value: "fieldB",
    component: "Select",
    parameter: {
      options: [{ value: "JOe" }, { value: "Jam" }],
    },
  },
  // {
  //   label: "Field C",
  //   value: "fieldC",
  //   component: "Switch",
  //   parameter: {},
  // },
  {
    label: {
      zhCN:"参数四",
      enUS:"Field D",
    },
    value: "fieldD",
    component: "Rate",
    parameter: {},
  },
  {
    label: {
      zhCN:"参数五",
      enUS:"Field E",
    },
    value: "fieldE",
    component: "Slider",
    parameter: {},
  },
  {
    label: {
      zhCN:"参数六",
      enUS:"Field F",
    },
    value: "fieldF",
    component: "TimePicker",
    parameter: {},
  },
  {
    label: {
      zhCN:"参数七",
      enUS:"Field G",
    },
    value: "fieldG",
    component: "MonthPicker",
    parameter: {},
  },
  {
    label: {
      zhCN:"参数八",
      enUS:"Field H",
    },
    value: "fieldH",
    component: "WeekPicker",
    parameter: {},
  },
  {
    label: {
      zhCN:"参数九",
      enUS:"Field J",
    },
    value: "fieldJ",
    component: "RangePicker",
    parameter: {},
  },
  {
    label: {
      zhCN:"参数十",
      enUS:"Field K",
    },
    value: "fieldK",
    component: "DatePicker",
    parameter: {},
  },
  {
    label: {
      zhCN:"参数十一",
      enUS:"Field L",
    },
    value: "fieldL",
    component: "InputNumber",
    parameter: {},
  },
  {
    label: {
      zhCN:"参数十二",
      enUS:"Field M",
    },
    value: "fieldM",
  },
])
const formRules = {
  fieldA: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ]
}
const dataSource = ref([])
dataSource.value = [...Array(100)].map((_, i) => ({
  key: i+1,
  name: 'JOe',
  age: `${i + 20}`,
  address: `china Beijing district${i+1}`,
  tags: ['nice', 'developer'],

}))

const columns = [
  {
    slots: { title: 'nameTitle', customRender: 'name'},
    dataIndex: "name",
    key: "name",
  },
  {
    slots: { title: 'ageTitle' },
    dataIndex: "age",
    key: "age",
    defaultSortOrder: "ascend",
    sorter: (a: { age: number }, b: { age: number }) => a.age - b.age,
  },
  {
    key: 'tags',
    dataIndex: 'tags',
    slots: {  title: 'tagsTitle' ,customRender: 'tags' },
  },
  {
    dataIndex: "address",
    key: "address",
    slots: {  title: 'addressTitle',customRender: 'address' },
  },
  {
    key: 'action',
    slots: {  title: 'actionTitle',customRender: 'action' },
  },
]
const activeKey = ref(1)
//修改记录
const editRecord = ref()
const changeEditStatus = (record)=>{
  editRecord.value = JSON.parse(JSON.stringify(record))
  record.isEdit = true
}
//提交修改
const confirmEdit = (record)=>{
  editRecord.value = JSON.parse(JSON.stringify(record))
  delete record.isEdit
}
//取消提交
const cancelEdit = (record)=>{
  record = JSON.parse(JSON.stringify(editRecord.value))
  delete record.isEdit
  console.log(editRecord.value,record)
}
// search调用接口
const searchData = () => {
  console.log(formState,"123")
}
// 修改地址
const editAddress = (record) =>{
  console.log(record,dataSource.value)
}
</script>
<style lang="less">
</style>